<template>
  <div class="home">
    <!-- 头部背景图 -->
    <el-image class="home-bg" :src="locale == 'en-US' ? enHomeBg : zhHomeBg" lazy fit="contain" :alt="`${$t('platform')}`"></el-image>
    <!-- 设备分类 -->
    <div class="view-title container">{{ $t("equipmentCategorization") }}</div>
    <div class="equipment-assort container">
      <div class="assort-swiper-button-prev" slot="button-prev">
        <i class="arrow el-icon-arrow-left"></i>
      </div>
      <swiper class="assort-swiper-box" :options="assortSwiperOption">
        <swiper-slide v-for="(item, index) in assortList" :key="item.title">
          <a
            class="assort-item"
            :href="`/used-machine/${item.titleEn}-${item.id}`"
            :title="`${$t('categorizationDetail')[index]} ${$t('machines')}`"
          >
            <img :src="item.img" :alt="`${$t('categorizationDetail')[index]}`" />
            <span>{{ $t("categorizationDetail")[index] }}</span>
          </a>
        </swiper-slide>
      </swiper>
      <div class="assort-swiper-button-next" slot="button-next">
        <i class="arrow el-icon-arrow-right"></i>
      </div>
    </div>
    <!-- 热卖机型 -->
    <div class="view-title container" v-if="equipmentList.length">{{ $t("hotSellingModels") }}</div>
    <div class="equipment-list container" v-if="equipmentList.length">
      <div class="hot-swiper-button-prev" slot="button-prev">
        <i class="arrow el-icon-arrow-left"></i>
      </div>
      <swiper class="hot-swiper-box" :options="hotSwiperOption">
        <swiper-slide v-for="item in equipmentList" :key="item.crmEquipmentId">
          <a class="equipment-item" :href="`/equipment/${item.typeNameEn}-${item.crmEquipmentId}`" :title="`${item.title} | ${item.subHeading}`">
            <img class="info-img" style="object-fit: cover" :src="item.thumbnail" :alt="item.title" />
            <div class="info-bottom">
              <div class="info-title">{{ item.title }}</div>
              <div class="info-year">{{ item.subHeading }}</div>
              <div class="info-tag" v-if="locale == 'zh-CN'">
                <p v-for="val in item.targerList" :key="val">{{ val }}</p>
              </div>
              <div style="height: 18px" v-else></div>
              <div class="info-price">
                <template v-if="item.crmEquipmentFixedPriceId && item.offlineBargaining != 1">
                  <p v-if="locale == 'en-US'">CNY{{ item.startingPriceNotag }}</p>
                  <p v-else>{{ item.startingPrice / 1000000 }}万</p>
                </template>
                <p v-else>{{ $t("priceNegotiable") }}</p>
              </div>
            </div>
          </a>
        </swiper-slide>
      </swiper>
      <div class="hot-swiper-button-next" slot="button-next">
        <i class="arrow el-icon-arrow-right"></i>
      </div>
    </div>
    <!-- 关于云联 -->
    <div class="view-title container">{{ $t("aboutYunlian") }}</div>
    <div :class="['about-us', 'container', newsList.length == 0 ? 'margin-b' : '']">
      <div class="about-dec">
        <div class="text-dec">{{ $t("companyIntroduction") }}</div>
        <a class="check-more" href="/about-us" :title="`${$t('yunLianUsedMachine')}`">
          <span>{{ $t("viewMore") }}</span>
          <img src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/right-small-white.png" />
        </a>
      </div>
      <el-image class="about-img" :src="two1" lazy fit="contain" :alt="`${$t('platform')}`"></el-image>
    </div>
    <!-- 最新消息 -->
    <div class="view-title container" v-if="newsList.length">{{ $t("latestNews") }}</div>
    <section class="article-list container" v-if="newsList.length">
      <a class="article-item" v-for="item in newsList" :key="item.id" :href="`/news-detail/${item.id}`" :title="item.title">
        <div class="pic">
          <el-image class="info-img" fit="cover" :src="item.imageUrl" lazy :alt="item.title"></el-image>
        </div>
        <div class="info-bottom">
          <div class="article-title">{{ item.title }}</div>
          <div class="article-bottom">
            <div class="category-name">{{ item.categoryName == "1" ? $t("industryNews") : $t("transactionCase") }}</div>
            <div class="release-time">
              <span>{{ item.releaseTime }}</span>
              <div class="button-next">
                <i class="arrow el-icon-arrow-right"></i>
              </div>
            </div>
          </div>
        </div>
      </a>
    </section>
    <!-- 侧边栏服务 -->
    <Dangling v-if="locale == 'zh-CN'" />
    <!-- WhatsApp -->
    <!-- <WhatsApp v-if="locale == 'en-US'" /> -->
    <!-- 在线客服 -->
    <Connect />
  </div>
</template>

<script>
import { mapState } from "vuex"
import BigNumber from "bignumber.js"
export default {
  name: "Home",
  layout: "Layout",
  components: {},
  data() {
    return {
      zhHomeBg: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/home-bg-zh.png",
      enHomeBg: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/home-bg-en.png",
      two1: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/two-1.png",
      assortList: [
        { id: 54, title: "起重机", titleEn: "Crane", img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/crane-1.png" },
        { id: 50, title: "泵车", titleEn: "Pump", img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/pump-1.png" },
        { id: 51, title: "车载泵", titleEn: "Vehicle", img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/vehicle-1.png" },
        { id: 53, title: "搅拌车", titleEn: "Mixer", img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/mixer-1.png" },
        { id: 56, title: "压路机", titleEn: "Rooler", img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/rooler.png" },
        { id: 55, title: "旋挖钻", titleEn: "Rotary", img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/rotary-1.png" },
        { id: 52, title: "拖泵", titleEn: "Trailer", img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/trailer-1.png" },
        { id: 47, title: "挖掘机", titleEn: "Excavator", img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/excavator-1.png" },
        { id: 49, title: "装载机", titleEn: "Loader", img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/loader-1.png" },
        { id: 57, title: "摊铺机", titleEn: "Paver", img: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/paver.png" }
      ],
      assortSwiperOption: {
        slidesPerView: 5,
        spaceBetween: 30,
        loop: true, //开启循环模式
        centeredSlides: false,
        preventClicksPropagation: true, //阻止click冒泡。拖动Swiper时阻止click事件
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        navigation: {
          nextEl: ".assort-swiper-button-next",
          prevEl: ".assort-swiper-button-prev"
        }
      },
      hotSwiperOption: {
        slidesPerView: 4,
        spaceBetween: 30,
        loop: true, //开启循环模式
        centeredSlides: false,
        preventClicksPropagation: true, //阻止click冒泡。拖动Swiper时阻止click事件
        autoplay: {
          delay: 3500,
          disableOnInteraction: false
        },
        navigation: {
          nextEl: ".hot-swiper-button-next",
          prevEl: ".hot-swiper-button-prev"
        }
      }
    }
  },
  head() {
    return {
      title: this.$i18n.t("headTitle"),
      meta: [
        {
          hid: "keywords",
          name: "keywords",
          content: this.$i18n.t("haeaKeyContent")
        },
        {
          hid: "description",
          name: "description",
          content: this.$i18n.t("haeaDecContent")
        }
      ]
    }
  },
  async asyncData({ app, query }) {
    let equipmentList = [] //热卖机型设备列表
    let newsList = [] //新闻资讯
    let newsForm = {
      pageNo: 1,
      pageSize: 4,
      sort: "id desc"
    }
    try {
      let { data } = await app.$api.equipmentList({ pageNo: 1, pageSize: 100, search: { popular: 1 } })
      equipmentList = (data.list || []).map((item) => {
        item.startingPriceNotag = new BigNumber(item.startingPrice).dividedBy(100).toFormat()
        let targerList = app.$optionsData.parseLabel(item)
        if (targerList.indexOf("寄售") != -1) {
          targerList.splice(targerList.indexOf("寄售"), 1)
        }
        targerList = targerList.splice(0, 2)
        item["targerList"] = targerList
        return item
      })
      let { data: newsData } = await app.$api.articleList({ ...newsForm, search: {} })
      newsList = newsData.list
    } catch (error) {
      console.log(error)
    }
    return {
      equipmentList,
      newsList
    }
  },
  props: {},
  computed: { ...mapState(["locale"]) },
  async mounted() {
    this.getPoint()
  },
  methods: {
    async getPoint() {
      let params = await this.$optionPoint.sendUrl(window, navigator, document)
      this.$api.burySave({ ...params }).then((res) => {})
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.home {
  .home-bg {
    width: 100%;
  }
  .view-title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 22px;
    color: #333;
    margin-top: 60px;
    margin-bottom: 20px;
    border-left: 3px solid #fb463f;
    padding-left: 5px;
  }
  .equipment-assort {
    display: flex;
    align-items: center;
    .assort-swiper-box {
      display: flex;
      align-items: center;
      overflow: hidden;
      .assort-item {
        width: 200px;
        height: 200px;
        display: flex;
        align-items: center;
        position: relative;
        img {
          width: 200px;
          height: 200px;
        }
        span {
          width: 200px;
          text-align: center;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 18px;
          color: #333;
          line-height: 30px;
          position: absolute;
          left: 0;
          bottom: 20px;
        }
      }
    }
    .assort-swiper-button-prev,
    .assort-swiper-button-next {
      position: static;
      margin: 0 20px;
      width: 30px;
      height: 30px;
      color: #bdbdbd;
      border: 2px solid #bdbdbd;
      border-radius: 50%;
      flex-shrink: 0;
      text-align: center;
      cursor: pointer;
      &::after {
        display: none;
      }
      &:hover {
        border-color: #fb463f;
        color: #fb463f;
      }
      .arrow {
        font-size: 20px;
        line-height: 30px;
        font-weight: 600;
        color: inherit;
      }
    }
  }
  .equipment-list {
    display: flex;
    align-items: center;
    .hot-swiper-box {
      display: flex;
      align-items: center;
      overflow: hidden;
      .equipment-item {
        width: 254px;
        height: 100%;
        margin-bottom: 20px;
        .info-img {
          width: 254px;
          height: 184px;
          display: block;
        }
        .info-bottom {
          width: 254px;
          height: 116px;
          background: #f6f7f9;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 10px;
          box-sizing: border-box;
          .info-title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 18px;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .info-year {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #999;
            line-height: 16px;
          }
          .info-tag {
            display: flex;
            align-items: center;
            p {
              height: 18px;
              line-height: 18px;
              padding: 2px 5px;
              border-radius: 4px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 12px;
              color: #fb463f;
              background: rgba(251, 70, 63, 0.08);
              margin-right: 5px;
            }
          }
          .info-price {
            display: flex;
            align-items: flex-end;
            flex-direction: row;
            justify-content: space-between;
            p {
              font-size: 16px;
              font-weight: 700;
              color: #fb463f;
            }
          }
        }
        &:hover {
          box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
          .info-bottom {
            background: #fff;
          }
        }
      }
    }
    .hot-swiper-button-prev,
    .hot-swiper-button-next {
      position: static;
      margin: 0 20px;
      width: 30px;
      height: 30px;
      color: #bdbdbd;
      border: 2px solid #bdbdbd;
      border-radius: 50%;
      flex-shrink: 0;
      text-align: center;
      cursor: pointer;
      &::after {
        display: none;
      }
      &:hover {
        border-color: #fb463f;
        color: #fb463f;
      }
      .arrow {
        font-size: 20px;
        line-height: 30px;
        font-weight: 600;
        color: inherit;
      }
    }
  }
  .about-us {
    display: flex;
    .about-dec {
      width: 50%;
      .text-dec {
        width: 100%;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 18px;
        color: #333;
        line-height: 36px;
        padding-right: 20px;
        box-sizing: border-box;
      }
      .check-more {
        width: 120px;
        height: 30px;
        background: #d71519;
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #fff;
        }
        img {
          width: 6px;
          height: 14px;
          margin-left: 6px;
        }
      }
    }
    .about-img {
      width: 50%;
    }
  }
  .margin-b {
    margin-bottom: 50px;
  }
  .article-list {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
    .article-item {
      width: 23.8%;
      height: 100%;
      margin-bottom: 20px;
      .pic {
        display: block;
        overflow: hidden;
        width: 100%;
        .info-img {
          width: 100%;
          height: 184px;
          display: block;
          transition: all 0.3s ease 0s;
          -webkit-transition: all 0.3s ease 0s;
          &:hover {
            transform: scale(1.05);
            -webkit-transform: scale(1.05);
          }
        }
      }
      .info-bottom {
        width: 100%;
        height: 136px;
        background: #f6f7f9;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px;
        box-sizing: border-box;
        .article-title {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 18px;
          line-height: 24px;
          color: #333;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .article-bottom {
          .category-name {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #999;
            line-height: 16px;
            margin-bottom: 10px;
          }
          .release-time {
            display: flex;
            align-items: center;
            justify-content: space-between;
            span {
              font-family: PingFangSC, PingFang SC;
              color: #6e6e6e;
              font-size: 14px;
            }
            .button-next {
              width: 20px;
              height: 20px;
              color: #cbe6ff;
              border: 2px solid #cbe6ff;
              border-radius: 50%;
              position: relative;
              &:hover {
                border-color: #183883;
                color: #183883;
              }
              .arrow {
                position: absolute;
                left: 50%;
                top: 50%;
                margin-top: -7px;
                margin-left: -6px;
                font-size: 14px;
                font-weight: 600;
                color: inherit;
              }
            }
          }
        }
      }
      &:last-child:nth-child(4n - 1) {
        margin-right: calc(24% + 4% / 3);
      }
      &:last-child:nth-child(4n - 2) {
        margin-right: calc(48% + 8% / 3);
      }
    }
  }
}
</style>
